var heightMin = '40px';
var heightMax = '400px';
var widthMin = '130px';
var widthMax = '340px';
window.onload = function () {

    // 渲染页面
    var imgNum = 20;//  20张图片
    var oBox = document.querySelector('.box');
    var innerStr = '';
    for (var j = 1; j <= 5; j++) {// 外层循环，生成行
        innerStr += "<div class=row" + j + ">"
        // 内层循环，生成列
        for (var i = 1; i <= 4; i++) {
            // 先写一个单元格
            innerStr += "<div data-line=" + j + " data-col=" + i + " onmouseenter='hover1()' class='line'>"
                + "<img class='img' src='./images/image" + ((j - 1) * 4 + i) * 1 + ".jpg' /></div>"
        }
        innerStr += '</div>'
    }
    oBox.innerHTML = innerStr;

    // 初始化 选择1-1
    change(1, 1);
}

// 跟随鼠标修改图片大小
function change(postX, postY) {
    var activeX = postX; // 横坐标
    var activeY = postY; // y纵坐标
    // 四种情况：1鼠标所在的div，最宽最高；2鼠标所在行，高度最高；3鼠标所在列，宽度最宽；三不沾最低且最窄
    for (var y = 1; y <= 5; y++) { // y纵坐标
        // 先找单元格，这是列，循环生成一行
        var temLine = document.querySelector('.row' + y);
        for (var x = 1; x <= 4; x++) { // 横坐标
            // 某行的每一个元素
            if (x == activeX && y == activeY) { // 当前元素
                temLine.children[x - 1].style.width = widthMax;
                temLine.children[x - 1].style.height = heightMax;

            } else if (y == activeY) { // 所在行，高度最高
                temLine.children[x - 1].style.width = widthMin;
                temLine.children[x - 1].style.height = heightMax;
            } else if (x == activeX) { // 所在列，宽度最宽
                temLine.children[x - 1].style.width = widthMax;
                temLine.children[x - 1].style.height = heightMin;
            } else { // 三不沾，宽高都是最小值
                temLine.children[x - 1].style.width = widthMin;
                temLine.children[x - 1].style.height = heightMin;
            }
        }
    }
}

// 移动鼠标 选择图片
function hover1() {
    // heightMin:40 heightMax:400  widthMin: 130 widthMax:340
    // 下一个步骤：需要指导元素放在那个图片上，第几行，第几列
    var e = event;
    var currEl = e.target; // 当前元素
    var lineNo = currEl.getAttribute('data-line'); // 所在行数
    var colNo = currEl.getAttribute('data-col'); // 所在列数
    change(colNo, lineNo)
}